<template>
  <el-row>
    <el-card>
      <el-col :span="24">
        <div class="table_content" style="margin-bottom: 1px">
          <el-row :gutter="4">
            <el-form
              :inline="true"
              label-position="left"
              class="demo-form-inline"
              label-width="100px"
            >
              <el-form-item>
                <el-input
                  class="mr5 sh"
                  placeholder="请输入关键字"
                  v-model="searchDto.keyword"
                ></el-input>
              </el-form-item>
              <el-form-item class="clear_item-margin-bottom">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="getDictList"
                  >查询
                </el-button>
                <el-button type="primary" icon="el-icon-s-open" @click="clear"
                  >重置</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-circle-plus"
                  @click="newDict()"
                  >新增字典
                </el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </div>
        <div class="table_content">
          <page-table
            ref="multipleSelection"
            :page-data="dictList"
            :loading="loading"
            :do-get-page-data="getDictList"
          >
            <el-table-column
              prop="name"
              label="字典名称"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="keyword" label="字典KEY" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status | keyText("USE_STATUS") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建日期"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | dataTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="管理"
              width="150"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-tooltip content="编辑" placement="top">
                  <el-button
                    type="button"
                    size="mini"
                    icon="el-icon-edit"
                    @click="editDict(scope.row)"
                  >
                  </el-button
                ></el-tooltip>
                <el-tooltip content="删除" placement="top"
                  ><el-button
                    size="mini"
                    icon="el-icon-delete"
                    @click="delDict(scope.row)"
                  >
                  </el-button
                ></el-tooltip>
              </template>
            </el-table-column>
          </page-table>

          <el-dialog
            :visible.sync="showEditDict"
            title="新增 / 编辑 选项"
            width="40%"
          >
            <el-form
              ref="form"
              :model="currentDict"
              :rules="rules"
              :gutter="10"
              label-width="120px"
            >
              <el-form-item label="字典名称" prop="name">
                <el-input v-model="currentDict.name"></el-input>
              </el-form-item>
              <el-form-item label="字典KEY" prop="keyword">
                <el-input v-model="currentDict.keyword"></el-input>
              </el-form-item>
              <el-form-item label="字典计算值" prop="value">
                <el-input v-model="currentDict.value"></el-input>
              </el-form-item>
              <el-form-item label="状态:" prop="enabled">
                <el-switch
                  v-model="currentDict.status"
                  active-color="#13ce66"
                  active-value="ENABLE"
                  inactive-value="DISABLE"
                  active-text="启用"
                  inactive-text="禁用"
                  inactive-color="#eeeeee"
                >
                </el-switch>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="saveNewDict">保存 </el-button>
              <el-button @click="showEditDict = false">取消 </el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-card>
  </el-row>
</template>
<script>
import { mapGetters } from "vuex";
import Status from "@/libs/status";
export default {
  name: "dataDict",
  created() {
    this.getDictList(1);
  },
  mounted() {},
  data() {
    return {
      loading: false,
      RoleEnabled1: Status.RoleEnabled1,
      searchDto: {
        endTime: "",
        keyword: "",
        parentId: 0,
        pageSize: 10,
        startTime: ""
      },
      parentId: "",
      num: 1,
      saveNode: 2,
      showNodeEditDict: false,
      showEditDict: false,
      rules: {
        name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        keyword: [{ required: true, message: "请输入字典KEY", trigger: "blur" }]
      },
      scondNodeList: []
    };
  },
  computed: {
    ...mapGetters({
      dictList: "dictList",
      nodeList: "nodeList",
      currentNodeDict: "currentNodeDict",
      currentDict: "currentDict"
    })
  },
  methods: {
    handleSizeChange(val) {
      console.log("1", val);
      this.searchDto.pageSize = val;
      this.getDictList(1);
    },
    handleCurrentChange(val) {
      console.log("2", val);
      this.getDictList(val);
    },
    //  数据字典列表
    getDictList(val) {
      let tem = Object.assign(this.searchDto, val);
      console.log(tem, "search");
      this.$store.dispatch("dataListUsingPOSTS", tem).then(ret => {});
    },
    //   //数据字典删除
    delDict(row) {
      this.$confirm("确认删除当前字典?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          //  console.log(tem);
          this.$store.dispatch("delListUsingPOSTS", tem).then(ret => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getDictList();
          });
        })
        .catch(() => {});
    },
    //数据字典添加
    newDict() {
      this.$store.commit("INIT_CURRENT_DICT");
      this.showEditDict = true;
    },
    //   //保存新增/修改数据字典
    saveNewDict() {
      let tem = {
        body: this.currentDict
      };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$store.dispatch("addOrUpdateSystemDictionary", tem).then(ret => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.$store.commit("INIT_CURRENT_DICT");
            this.getDictList();
            this.showEditDict = false;
          });
        } else {
          return false;
        }
      });
    },
    //编辑数据字典
    editDict(row) {
      this.$router.push({
        name: "dataDictDetail",
        params: { pageType: "update", formData: row },
        query: { t: this.uuid }
      });
    },
    //点击表格.显示对应子类型
    getNodeDict(row, expanded) {
      console.log("点击表格", row);
      this.parentId = row.id;
      this.$store
        .dispatch("dataListSubUsingPOSTS", {
          searchDto: {
            parentId: this.parentId
          }
        })
        .then(ret => {});
    },
    getSecondNodeDict(row, expanded) {
      let parentId = row.id;
      this.API.dataListSubUsingPOST({
        searchDto: {
          parentId: parentId
        }
      }).then(res => {
        this.scondNodeList = res.data;
      });
    },

    //   //  子菜单添加
    newNodeDict(val) {
      // console.log(val);
      this.$store.commit("INIT_CURRENT_NODE_DICT");
      this.currentNodeDict.dictKey = val;
      this.showNodeEditDict = true;
    },
    clear() {
      this.searchDto.keyword = "";
      this.getDictList(1);
    },
    //   //保存新增/修改数据 子类字典
    saveNewNodeDict(o) {
      // console.log(o);
      if (this.currentNodeDict.id) {
        var param = {
          appKey: window.appKey,
          dataEditDto: this.currentNodeDict
        };
        this.$store.dispatch("dataEditUsingPOSTS", param).then(ret => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.$store.commit("INIT_CURRENT_NODE_DICT");
          this.getDictList();
          this.showNodeEditDict = false;
        });
      } else {
        var tem = {
          dataDictDto: this.currentNodeDict
        };
        tem.dataDictDto.parentId = this.parentId;
        console.log(tem);
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.currentDict);
            this.$store.dispatch("dataSaveNodeUsingPOSTS", tem).then(ret => {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.$store.commit("INIT_CURRENT_NODE_DICT");
              this.getDictList();
              this.showNodeEditDict = false;
            });
          } else {
            return false;
          }
        });
      }
    }
  },
  components: {}
};
</script>

<style scoped></style>
